<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="../model/tree-status.html">

<polymer-element name="ct-tree-status" noscript attributes="status">
  <template>
    <style>
      :host {
        display: flex;
      }
      :host([state=throttled]) {
        background-color: #fffc6c;
      }

      :host([state=closed]),
      :host([state=closed]) a {
        color: white;
        background-color: #e98080;
      }

      .status {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px;
        padding: 3px;
      }

     :host[state=open] {
        margin: 0;
        padding: 0;
      }

      .message {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
    <template if="{{ status.message }}">
      <div class="status">
        <div class="message">{{ status.project }}: {{ status.message }}</div>
        <div style="padding: 0 0px;">[ <a href="{{ status.url }}">details</a> ]</div>
      </div>
    </template>
  </template>
</polymer-element>
